<template>
    <label class="draginput" 
        :style="`width:${width}px;height:${height}px`" 
        @wheel.prevent="wheel"
        @mousedown="(event)=>{ this.itemMouseDown(event); }" >
        <input :value="value" @input="change($event.target.value)" :disabled="disabled" />
        <span class="icon_label">{{this.title}}</span>
    </label>
</template>
<script>
export default {
    name: "dragInput",
    data(){
        return {
            xy:{x:0,y:0},
            mouseDown:false,
            mouseEvent:null
        }
    },
    props:{
        width:{type:Number,default:()=>{return 90}},
        height:{type:Number,default:()=>{return 70}},
        value:{type:Number,default:()=>{return 0}},
        max:{type:Number,default:()=>{return 10000}},
        min:{type:Number,default:()=>{return 0}},
        title:{type:String,default:()=>{return '数值'}},
        step:{type:Number,default:1},
        disabled:{type:Boolean,default:()=>{return false}}, 
    },
    mounted(){
        var that=this;
        window.addEventListener("mousemove", (event)=>{
            if(that.mouseDown){
                //console.log('onmousemove',event);
                that.mouseEvent=event;
                that.dragTimer();
            }
        });

        window.addEventListener("mouseup", (event)=>{
            if(that.mouseDown){ 
                document.body.style.cursor='';              
                //console.log('mouseup',event);
                that.mouseEvent=event;
                that.mouseDown=false;
            }
        });
    },
    methods:{
        itemMouseDown:function(event){
            if(this.disabled) return;
            // console.log('itemMouseDown',event,this.mouseDown)           
            this.xy={x:event.clientX,y:event.clientY};
            this.mouseDown=true;
            this.mouseEvent=event;
            document.body.style.cursor='n-resize';
            this.dragTimer();
        },
        dragTimer:function(){           
            var that=this;
            if(this.mouseDown && this.mouseEvent){
                var moveXY={x:this.mouseEvent.clientX,y:this.mouseEvent.clientY};               
                this.change(this.value-moveXY.y+this.xy.y)
                this.xy=moveXY;        
            }
        },
        change:function(v){
            if(this.disabled) return;
            if(isNaN(v)){
                return;
            }
            if(v>=this.min && v<=this.max){
                this.$emit('input',parseInt(v));
                this.$emit('change',v);
            }            
        },
        wheel:function(event){
            if(this.disabled) return;
            //console.log('mousewheel',event);
            var delta=event.wheelDelta?(event.wheelDelta>0?"up":"down"):(event.detail?(event.detail>0?"up":"down"):"");
            if(delta === 'up'){
                this.$emit('input',this.value+this.step);
            }else if(delta === 'down'){
                this.$emit('input',this.value-this.step);
            }
        }
    }

}
</script>
<style lang="scss" scoped>
.draginput {
    background: #3f3f3c;
    border-radius: 3px;
    -webkit-font-smoothing: antialiased;    
    display: block;
    position: relative;
    float: left;
    margin: 5px 0 0 5px;
}

.draginput input {
    border: none;
    background: transparent;
    font: 24px/normal sans-serif;
    text-align: center;
    color: #4F80FF;
    padding: 30px 0 16px;
    width: 100%;
    height: 24px;
    position: relative;
    z-index: 2;
}


.draginput input[readonly=readonly] {
    -webkit-appearance: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.draginput input, .draginput input:hover, .draginput input:active {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    outline: none;
}

.draginput span {
    font: 11px/130% sans-serif;
    color: #ccc;
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    text-align: left;
}

body.dragInput-dragging{
    cursor: n-resize;
}
</style>